<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div id="top">
        <header class="aui-bar aui-bar-nav aui-bar-light u-aui-bar" id="header">
            <a href="javascript:api.closeWin();" class="aui-pull-left aui-btn">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title u-aui-title">跨城订单</div>
            <div class="aui-pull-right" style="color: #333!important;" onclick="cancel()" id="cancel-btn">取消订单</div>
        </header>
        <div class="aui-tab deliv-tab order-tab" id="deliv-tab">
            <a href="javascript:;" class="aui-tab-item aui-active">订单状态</a>
            <a href="javascript:;" class="aui-tab-item">轨迹追踪</a>
            <a href="javascript:;" class="aui-tab-item">订单详情</a>
        </div>
    </div>
    <!--js-->
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript" src="../script/aui-tab.js"></script>
    <script type="text/javascript">
        var statusBarPos, headerPos, topPos;
        apiready = function() {
            api.showProgress({
                title: '正在加载',
                text: '请稍候...',
                modal: true
            });
            statusBarPos = app.statusBar.pos();
            headerPos = app.pos('header');
            topPos = app.pos('top');

            getOrder();

        }

        function getOrder() {
            app.request.post('Client/provinceOrder', {
                order_id: api.pageParam.order.id
            }, {}, function(res) {
                if (res.code == 200) {
                    if (res.data.status == -1 || res.data.status > 2) {
                        $api.remove($api.byId('cancel-btn'));
                    }

                    api.openFrameGroup({
                        name: 'order_detail1_frame',
                        rect: {
                            x: 0,
                            y: statusBarPos.h + topPos.h,
                            w: 'auto',
                            h: 'auto'
                        },
                        scrollEnabled: false,
                        frames: [{
                            name: 'order_detail1_content0',
                            url: 'order_detail1_content0.html',
                            bounces: true,
                            pageParam: {
                                statusBarPos: statusBarPos,
                                headerPos: headerPos,
                                order: res.data
                            }
                        }, {
                            name: 'order_detail1_content1',
                            url: 'order_detail1_content1.html',
                            bounces: false,
                            pageParam: {
                                order: res.data
                            }
                        }, {
                            name: 'order_detail1_content2',
                            url: 'order_detail1_content2.html',
                            bounces: true,
                            pageParam: {
                                order: res.data
                            }
                        }]
                    });

                    new auiTab({
                        element: document.getElementById("deliv-tab"),
                    }, function(ret) {
                        // console.log(ret.index)
                        api.setFrameGroupIndex({
                            name: 'order_detail1_frame',
                            index: ret.index - 1
                        });
                    });
                } else {
                    app.error(res.message);
                }
            });
        }

        function reloadGetOrder() {
            app.request.post('Client/provinceOrder', {
                order_id: api.pageParam.order.id
            }, {}, function(res) {
                if (res.code == 200) {
                    api.sendEvent({
                        name: 'orderDetailRefreshHeaderInfo',
                        extra: res.data
                    });
                } else {
                    app.error(res.message);
                }
            });
            api.hideProgress();
        }

        //取消订单按钮点击
        function cancel() {
            api.confirm({
                title: '提示',
                msg: '确认取消订单吗?',
                buttons: ['确定', '取消']
            }, function(ret, err) {
                if (ret.buttonIndex == 1) {
                    app.request.post('Client/cancelProvinceOrder', {
                        order_id: api.pageParam.order.id
                    }, {}, function(res) {
                        if (res.code == 200) {
                            api.execScript({
                                name: 'my_order',
                                frameName: 'my_order_content2',
                                script: 'vObj.getOrderList()'
                            });

                            api.toast({
                                msg: '订单已取消',
                                duration: 1000,
                                location: 'top'
                            });
                            setTimeout(function() {
                                api.closeWin();
                            }, 1000);
                        } else {
                            app.error(res.message);
                        }
                    });
                }
            });
        }
    </script>
</body>

</html>
